<template>
  <div>
    <header>
      <BaseNavBar title="账户充值" isNav="true" />
    </header>
    <main style="margin-top: 8px;">
      <van-form @submit="onSubmit" label-width="8em">
        <van-cell-group inset>
          <van-field v-model="balance" label="账户余额" :readonly="true" />
          <van-field v-model="accountBalance" type="digit"  name="accountBalance" label="充值金额（元）"   placeholder="请输入充值的金额"/>
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button plain  round block type="success" native-type="submit">
            立即充值
          </van-button>
        </div>
      </van-form>


    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { showToast, showConfirmDialog } from 'vant';
import BaseNavBar from '@/components/BaseNavBar/index.vue';
import { getUserInfo,userCharge } from '@/apis/user';

const balance = ref('');
const accountBalance = ref('');


const onSubmit = (values) => {
  showConfirmDialog({
    title: `确定要为您的账户充值${values?.accountBalance}元吗？`,
  })
    .then(async () => {
      try {
        const { code, msg } = await userCharge({
          accountBalance:values?.accountBalance
        });
        if (code === 200) {
          showToast('已成功充值');
          accountBalance.value = '';
          init()
          return
        }
        showToast(msg);
      } catch (error) {
        console.log(error, 'error');

      }
    })
    .catch(() => {

    });
};




const init = async () => {
  const { data = {} } = await  getUserInfo();
  balance.value = data?.accountBalance;
};

onMounted(() => {
  init()
});
</script>

<style lang="less" scoped></style>
